<template>
    <van-popup class="popAgree" :show="showPopup" duration="0.3">
        <label>
            未注册手机号登录后将自动生成账号，且代表你已阅读并同意
            <a href="javascript:void(0)">《用户服务协议》</a>、
            <a href="javascript:void(0)">《隐私政策》</a>和
            <a href="javascript:void(0)">《运营商协议》</a>
            的全部条款，接收后可开始使用我们的服务
        </label>
        <div class="btn_group">
            <van-button type="default" round @click="onDisagree">不同意</van-button>
            <van-button type="primary" round color="rgb(2, 182, 253)" @click="onAgree">同意</van-button>
        </div>
    </van-popup>
    <van-popup class="popLoading" v-model:show="msgPopup.status" duration="0.3">
        <template v-if="msgPopup.message == 'loading'"><van-loading color="#fff" /></template>
        <template v-else>{{msgPopup.message}}</template>
    </van-popup>
</template>

<script>
export default {
    name:'CheckAgreePrompt',
    setup(props,context){
        const onDisagree = () => {
            context.emit('on-disagree')
        }
        const onAgree = () => {
            context.emit('on-agree')
        }
        return {
            onDisagree,
            onAgree
        }
    },
    emits:['on-disagree','on-agree'],
    props:['showPopup','msgPopup']
}
</script>

<style>

.popAgree{
    margin: 0 25px;
    border-radius: 0.875rem;
    padding: 25px;
}
.popAgree label{color: rgb(127, 127, 127);}
.popAgree .btn_group{
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}
.popAgree .btn_group .van-button{
    width: 48%;
    font-size: 1rem;
}
/* 加载弹出框 */
.popLoading{
    padding: 25px;
    border-radius: 0.875rem;
    background: rgba(255,255,255,0.5);
}
</style>